import React, { useState, useEffect, useMemo } from 'react';
import { useRequest } from 'umi';
import { getFetch } from '@/utils/doFetch';
import { ScrollBoard } from '@jiaminghi/data-view-react';
import moment from 'moment';

const Jzdata = ({ settotal }) => {
  const { data, loading } = useRequest(
    () => {
      return getFetch({ url: '/vehicle-api/monitor/fire_control_list', params: {} });
    },
    {
      debounceWait: 300,
    },
  );

  let config = useMemo(() => {
    settotal({ jztotal: data?.total ?? 0 });

    if (data?.list) {
      return {
        header: ['报警位置', '报警时间'],
        headerBGC: 'rgba(30,79,140,0.5)',
        evenRowBGC: 'rgba(100,143,194,0.1)',
        oddRowBGC: 'rgba(255,255,255,0.1)',
        hoverPause: !(data?.list && data?.list.length < 7),
        rowNum: 6,
        data: data?.list.map((it) => [
          it?.alarm_address,
          moment(it?.alarm_time).format('YYYY-MM-DD HH:mm'),
        ]),
      };
    } else {
      return {};
    }
  }, [data?.total]);

  return (
    <ScrollBoard
      config={config}
      style={{ width: '100%', height: '100%' }}
      onClick={(row) => {
        console.log(row);
      }}
    />
  );
};

export default Jzdata;
